<template>
  <div id="menu">
    <el-button  size="mini" @click="handleRename" :disabled="!optShow.rename">重命名</el-button>
    <el-button  size="mini" @click="handleDelete" :disabled="!optShow.del">删除</el-button>
    <el-button  size="mini" @click="handleDowload" :disabled="!optShow.download">下载</el-button>
  </div>
</template>

<script>
  export default {
    name: 'f-ftpContextMenu.vue',
    data () {
      return {
        optShow: {
          rename: true,
          del: true,
          download: true
        }
      }
    },
    methods: {
      init (row, column, event) {
        if (row.file && !row.showProcess) {
          this.optShow.download = true
        } else if (row.directory) {
          this.optShow.download = false
        } else {
          this.optShow.download = false
        }
        let menu = document.querySelector('#menu')
        let x = event.clientX
        let y = event.clientY
        if ((x + menu.clientWidth + 30) > document.body.clientWidth) { // 超出浏览器范围的情况下 左移动100像素，即菜单宽
          x = x - 100
        } else { // 未超出浏览器情况下向右移动30像素
          x = x + 30
        }
       if ((y + menu.clientHeight) > document.body.clientHeight) {
         y = y - menu.clientHeight
       }
        menu.style.left = x + 'px'
        menu.style.top = y + 'px'
        document.addEventListener('click', this.foo)
      },
      foo () { // 点击其他隐藏掉菜单
        this.$emit('foo')
      },
      handleDelete () { // 删除
        this.$emit('handleDelete')
      },
      handleRename () { // 重命名
        this.$emit('handleRename')
      },
      handleDowload () { // 下载
        this.$emit('handleDowload')
      }
    }
  }
</script>

<style scoped>
  #menu {
    border-radius: 4px;
    background-color: #ffffff;
    display: inline-block;
    padding: 10px 0px;
    position: fixed;
    z-index: 99;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
  .el-button{
    text-align: left;
    display: block;
    width: 100px;
    margin-left: 0px;
    border-radius: 0px;
    border: none;
  }
</style>
